<template>
  <div class="action-buttons">
    <button 
      class="btn-action primary" 
      @click="$emit('saveTemplate')" 
      :disabled="!hasExamData"
    >
      💾 保存模板
    </button>
    <button 
      class="btn-action success" 
      @click="$emit('exportQuestions')" 
      :disabled="!hasExamData || isStreaming"
    >
      📄 导出试题版
    </button>
    <button 
      class="btn-action info" 
      @click="$emit('exportWithAnswers')" 
      :disabled="!hasExamData || isStreaming"
    >
      📝 导出答案版
    </button>
    <button 
      class="btn-action" 
      @click="$emit('newExam')"
    >
      🆕 新建试卷
    </button>
  </div>
</template>

<script>
export default {
  name: 'ActionButtons',
  props: {
    hasExamData: {
      type: Boolean,
      default: false
    },
    isStreaming: {
      type: Boolean,
      default: false
    }
  },
  emits: ['saveTemplate', 'exportQuestions', 'exportWithAnswers', 'newExam']
}
</script>

<style scoped>
.action-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.btn-action {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-action.primary {
  background: linear-gradient(135deg, #9f7aea 0%, #667eea 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(159, 122, 234, 0.3);
}

.btn-action.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(159, 122, 234, 0.4);
}

.btn-action.success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
}

.btn-action.success:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4);
}

.btn-action.info {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
}

.btn-action.info:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(66, 153, 225, 0.4);
}

.btn-action:not(.primary):not(.success):not(.info) {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
  color: #4a5568;
  box-shadow: 0 4px 15px rgba(160, 174, 192, 0.3);
}

.btn-action:not(.primary):not(.success):not(.info):hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(160, 174, 192, 0.4);
}
</style>